<!DOCTYPE html>
<html
  lang="en"
  data-bs-theme="light"
  data-menu-color="brand"
  data-topbar-color="light"
>
  <head>
    <meta charset="utf-8" />
    <title>
      Feather Icons | Dashtrap - Responsive Bootstrap 5 Admin Dashboard
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      content="A fully featured admin theme which can be used to build CRM, CMS, etc."
      name="description"
    />
    <meta content="Myra Studio" name="author" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="../src/assets/images/favicon.ico" />

    <!-- App css -->
    <link
      href="../src/assets/css/style.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../src/assets/css/icons.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="../src/assets/js/config.js"></script>
  </head>

  <body>
    <!-- Begin page -->
    <div class="layout-wrapper">
      <!-- ========== Left Sidebar ========== -->
      <div class="main-menu">
        <!-- Brand Logo -->
        <div class="logo-box">
          <!-- Brand Logo Light -->
          <a href="index.html" class="logo-light">
            <img
              src="../src/assets/images/logo-light.png"
              alt="logo"
              class="logo-lg"
              height="28"
            />
            <img
              src="../src/assets/images/logo-sm.png"
              alt="small logo"
              class="logo-sm"
              height="28"
            />
          </a>

          <!-- Brand Logo Dark -->
          <a href="index.html" class="logo-dark">
            <img
              src="../src/assets/images/logo-dark.png"
              alt="dark logo"
              class="logo-lg"
              height="28"
            />
            <img
              src="../src/assets/images/logo-sm.png"
              alt="small logo"
              class="logo-sm"
              height="28"
            />
          </a>
        </div>

        <!--- Menu -->
        <div data-simplebar>
          <ul class="app-menu">
            <li class="menu-title">Menu</li>

            <li class="menu-item">
              <a href="index.html" class="menu-link waves-effect waves-light">
                <span class="menu-icon"><i class="bx bx-home-smile"></i></span>
                <span class="menu-text"> Dashboards </span>
                <span class="badge bg-primary rounded ms-auto">01</span>
              </a>
            </li>

            <li class="menu-title">Custom</li>

            <li class="menu-item">
              <a
                href="apps-calendar.html"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-calendar"></i></span>
                <span class="menu-text"> Calendar </span>
              </a>
            </li>

            <li class="menu-item">
              <a
                href="#menuExpages"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-file"></i></span>
                <span class="menu-text"> Extra Pages </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuExpages">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="pages-starter.html" class="menu-link">
                      <span class="menu-text">Starter</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-invoice.html" class="menu-link">
                      <span class="menu-text">Invoice</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-login.html" class="menu-link">
                      <span class="menu-text">Log In</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-register.html" class="menu-link">
                      <span class="menu-text">Register</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-recoverpw.html" class="menu-link">
                      <span class="menu-text">Recover Password</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-lock-screen.html" class="menu-link">
                      <span class="menu-text">Lock Screen</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-404.html" class="menu-link">
                      <span class="menu-text">Error 404</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-500.html" class="menu-link">
                      <span class="menu-text">Error 500</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuLayouts"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-layout"></i></span>
                <span class="menu-text"> Layouts </span>
                <span class="badge bg-blue ms-auto">New</span>
              </a>
              <div class="collapse" id="menuLayouts">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="layout-horizontal.html" class="menu-link">
                      <span class="menu-text">Horizontal</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-sidenav-light.html" class="menu-link">
                      <span class="menu-text">Sidenav Light</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-sidenav-dark.html" class="menu-link">
                      <span class="menu-text">Sidenav Dark</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-topbar-dark.html" class="menu-link">
                      <span class="menu-text">Topbar Dark</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-title">Components</li>

            <li class="menu-item">
              <a
                href="#menuComponentsui"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-cookie"></i></span>
                <span class="menu-text"> UI Elements </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuComponentsui">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="ui-alerts.html" class="menu-link">
                      <span class="menu-text">Alerts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-buttons.html" class="menu-link">
                      <span class="menu-text">Buttons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-cards.html" class="menu-link">
                      <span class="menu-text">Cards</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-carousel.html" class="menu-link">
                      <span class="menu-text">Carousel</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-dropdowns.html" class="menu-link">
                      <span class="menu-text">Dropdowns</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-video.html" class="menu-link">
                      <span class="menu-text">Embed Video</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-general.html" class="menu-link">
                      <span class="menu-text">General UI</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-grid.html" class="menu-link">
                      <span class="menu-text">Grid</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-images.html" class="menu-link">
                      <span class="menu-text">Images</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-list-group.html" class="menu-link">
                      <span class="menu-text">List Group</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-modals.html" class="menu-link">
                      <span class="menu-text">Modals</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-offcanvas.html" class="menu-link">
                      <span class="menu-text">Offcanvas</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-placeholders.html" class="menu-link">
                      <span class="menu-text">Placeholders</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-progress.html" class="menu-link">
                      <span class="menu-text">Progress</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-spinners.html" class="menu-link">
                      <span class="menu-text">Spinners</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-tabs-accordions.html" class="menu-link">
                      <span class="menu-text">Tabs & Accordions</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-tooltips-popovers.html" class="menu-link">
                      <span class="menu-text">Tooltips & Popovers</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-typography.html" class="menu-link">
                      <span class="menu-text">Typography</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuExtendedui"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"
                  ><i class="bx bx-briefcase-alt-2"></i
                ></span>
                <span class="menu-text"> Components </span>
                <span class="badge bg-info ms-auto">Hot</span>
              </a>
              <div class="collapse" id="menuExtendedui">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="components-range-slider.html" class="menu-link">
                      <span class="menu-text">Range Slider</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="components-sweet-alert.html" class="menu-link">
                      <span class="menu-text">Sweet Alert</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="components-loading-buttons.html" class="menu-link">
                      <span class="menu-text">Loading Buttons</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuIcons"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-aperture"></i></span>
                <span class="menu-text"> Icons </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuIcons">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="icons-feather.html" class="menu-link">
                      <span class="menu-text">Feather Icons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="icons-mdi.html" class="menu-link">
                      <span class="menu-text">Material Design Icons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="icons-dripicons.html" class="menu-link">
                      <span class="menu-text">Dripicons</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuForms"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bxs-eraser"></i></span>
                <span class="menu-text"> Forms </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuForms">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="forms-elements.html" class="menu-link">
                      <span class="menu-text">General Elements</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-advanced.html" class="menu-link">
                      <span class="menu-text">Advanced</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-validation.html" class="menu-link">
                      <span class="menu-text">Validation</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-quilljs.html" class="menu-link">
                      <span class="menu-text">Editor</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-file-uploads.html" class="menu-link">
                      <span class="menu-text">File Uploads</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuTables"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-table"></i></span>
                <span class="menu-text"> Tables </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuTables">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="tables-basic.html" class="menu-link">
                      <span class="menu-text">Basic Tables</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="tables-datatables.html" class="menu-link">
                      <span class="menu-text">Data Tables</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuCharts"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"
                  ><i class="bx bx-doughnut-chart"></i
                ></span>
                <span class="menu-text"> Charts </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuCharts">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="charts-apex.html" class="menu-link">
                      <span class="menu-text">Apex Charts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="charts-morris.html" class="menu-link">
                      <span class="menu-text">Morris Charts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="charts-chartjs.html" class="menu-link">
                      <span class="menu-text">Chartjs Charts</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuMaps"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-map-alt"></i></span>
                <span class="menu-text"> Maps </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuMaps">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="maps-google.html" class="menu-link">
                      <span class="menu-text">Google Maps</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="maps-vector.html" class="menu-link">
                      <span class="menu-text">Vector Maps</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuMultilevel"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-share-alt"></i></span>
                <span class="menu-text"> Multi Level </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuMultilevel">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a
                      href="#menuMultilevel2"
                      data-bs-toggle="collapse"
                      class="menu-link waves-effect waves-light"
                    >
                      <span class="menu-text"> Second Level </span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menuMultilevel2">
                      <ul class="sub-menu">
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 1</span>
                          </a>
                        </li>
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 2</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>

                  <li class="menu-item">
                    <a
                      href="#menuMultilevel3"
                      data-bs-toggle="collapse"
                      class="menu-link waves-effect waves-light"
                    >
                      <span class="menu-text">Third Level</span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menuMultilevel3">
                      <ul class="sub-menu">
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 1</span>
                          </a>
                        </li>
                        <li class="menu-item">
                          <a
                            href="#menuMultilevel4"
                            data-bs-toggle="collapse"
                            class="menu-link waves-effect waves-light"
                          >
                            <span class="menu-text">Item 2</span>
                            <span class="menu-arrow"></span>
                          </a>
                          <div class="collapse" id="menuMultilevel4">
                            <ul class="sub-menu">
                              <li class="menu-item">
                                <a
                                  href="javascript: void(0);"
                                  class="menu-link"
                                >
                                  <span class="menu-text">Item 1</span>
                                </a>
                              </li>
                              <li class="menu-item">
                                <a
                                  href="javascript: void(0);"
                                  class="menu-link"
                                >
                                  <span class="menu-text">Item 2</span>
                                </a>
                              </li>
                            </ul>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- Start Page Content here -->
      <div class="page-content">
        <!-- ========== Topbar Start ========== -->
        <div class="navbar-custom">
          <div class="topbar">
            <div class="topbar-menu d-flex align-items-center gap-lg-2 gap-1">
              <!-- Brand Logo -->
              <div class="logo-box">
                <!-- Brand Logo Light -->
                <a href="index.html" class="logo-light">
                  <img
                    src="../src/assets/images/logo-light.png"
                    alt="logo"
                    class="logo-lg"
                    height="22"
                  />
                  <img
                    src="../src/assets/images/logo-sm.png"
                    alt="small logo"
                    class="logo-sm"
                    height="22"
                  />
                </a>

                <!-- Brand Logo Dark -->
                <a href="index.html" class="logo-dark">
                  <img
                    src="../src/assets/images/logo-dark.png"
                    alt="dark logo"
                    class="logo-lg"
                    height="22"
                  />
                  <img
                    src="../src/assets/images/logo-sm.png"
                    alt="small logo"
                    class="logo-sm"
                    height="22"
                  />
                </a>
              </div>

              <!-- Sidebar Menu Toggle Button -->
              <button class="button-toggle-menu">
                <i class="mdi mdi-menu"></i>
              </button>
            </div>

            <ul class="topbar-menu d-flex align-items-center gap-4">
              <li class="d-none d-md-inline-block">
                <a class="nav-link" href="" data-bs-toggle="fullscreen">
                  <i class="mdi mdi-fullscreen font-size-24"></i>
                </a>
              </li>

              <li class="dropdown">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <i class="mdi mdi-magnify font-size-24"></i>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-animated dropdown-menu-end dropdown-lg p-0"
                >
                  <form class="p-3">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Search ..."
                      aria-label="Recipient's username"
                    />
                  </form>
                </div>
              </li>

              <li class="dropdown d-none d-md-inline-block">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <img
                    src="../src/assets/images/flags/us.jpg"
                    alt="user-image"
                    class="me-0 me-sm-1"
                    height="18"
                  />
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-menu-animated"
                >
                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/germany.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">German</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/italy.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Italian</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/spain.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Spanish</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/russia.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Russian</span>
                  </a>
                </div>
              </li>

              <li class="dropdown notification-list">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <i class="mdi mdi-bell font-size-24"></i>
                  <span class="badge bg-danger rounded-circle noti-icon-badge"
                    >9</span
                  >
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0"
                >
                  <div
                    class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border"
                  >
                    <div class="row align-items-center">
                      <div class="col">
                        <h6 class="m-0 font-size-16 fw-semibold">
                          Notification
                        </h6>
                      </div>
                      <div class="col-auto">
                        <a
                          href="javascript: void(0);"
                          class="text-dark text-decoration-underline"
                        >
                          <small>Clear All</small>
                        </a>
                      </div>
                    </div>
                  </div>

                  <div class="px-1" style="max-height: 300px" data-simplebar>
                    <h5 class="text-muted font-size-13 fw-normal mt-2">
                      Today
                    </h5>
                    <!-- item-->

                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card unread-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-primary">
                              <i class="mdi mdi-comment-account-outline"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Datacorp
                              <small class="fw-normal text-muted ms-1"
                                >1 min ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Caleb Flakelar commented on Admin</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-info">
                              <i class="mdi mdi-account-plus"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Admin
                              <small class="fw-normal text-muted ms-1"
                                >1 hours ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >New user registered</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <h5 class="text-muted font-size-13 fw-normal mt-0">
                      Yesterday
                    </h5>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon">
                              <img
                                src="../src/assets/images/users/avatar-2.jpg"
                                class="img-fluid rounded-circle"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Cristina Pride
                              <small class="fw-normal text-muted ms-1"
                                >1 day ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Hi, How are you? What about our next
                              meeting</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <h5 class="text-muted font-size-13 fw-normal mt-0">
                      30 Dec 2021
                    </h5>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-primary">
                              <i class="mdi mdi-comment-account-outline"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Datacorp
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Caleb Flakelar commented on Admin</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon">
                              <img
                                src="../src/assets/images/users/avatar-4.jpg"
                                class="img-fluid rounded-circle"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Karen Robinson
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Wow ! this admin looks good and awesome
                              design</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <div class="text-center">
                      <i
                        class="mdi mdi-dots-circle mdi-spin text-muted h3 mt-0"
                      ></i>
                    </div>
                  </div>

                  <!-- All-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item text-center text-primary notify-item border-top border-light py-2"
                  >
                    View All
                  </a>
                </div>
              </li>

              <li class="nav-link" id="theme-mode">
                <i class="bx bx-moon font-size-24"></i>
              </li>

              <li class="dropdown">
                <a
                  class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <img
                    src="../src/assets/images/users/avatar-4.jpg"
                    alt="user-image"
                    class="rounded-circle"
                  />
                  <span class="ms-1 d-none d-md-inline-block">
                    Jamie D. <i class="mdi mdi-chevron-down"></i>
                  </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end profile-dropdown">
                  <!-- item-->
                  <div class="dropdown-header noti-title">
                    <h6 class="text-overflow m-0">Welcome !</h6>
                  </div>

                  <!-- item-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-user"></i>
                    <span>My Account</span>
                  </a>

                  <!-- item-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-settings"></i>
                    <span>Settings</span>
                  </a>

                  <!-- item-->
                  <a
                    href="pages-lock-screen.html"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-lock"></i>
                    <span>Lock Screen</span>
                  </a>

                  <div class="dropdown-divider"></div>

                  <!-- item-->
                  <a href="pages-login.html" class="dropdown-item notify-item">
                    <i class="fe-log-out"></i>
                    <span>Logout</span>
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- ========== Topbar End ========== -->

        <div class="px-3">
          <!-- Start Content-->
          <div class="container-fluid">
            <!-- start page title -->
            <div class="py-3 py-lg-4">
              <div class="row">
                <div class="col-lg-6">
                  <h4 class="page-title mb-0">Feather Icons</h4>
                </div>
                <div class="col-lg-6">
                  <div class="d-none d-lg-block">
                    <ol class="breadcrumb m-0 float-end">
                      <li class="breadcrumb-item">
                        <a href="javascript: void(0);">Icons</a>
                      </li>
                      <li class="breadcrumb-item active">Feather Icons</li>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
            <!-- end page title -->

            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <div class="row icons-list-demo">
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-alert-octagon"></i> fe-alert-octagon
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-alert-circle"></i> fe-alert-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-activity"></i> fe-activity
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-alert-triangle"></i> fe-alert-triangle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-align-center"></i> fe-align-center
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-airplay"></i> fe-airplay
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-align-justify"></i> fe-align-justify
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-align-left"></i> fe-align-left
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-align-right"></i> fe-align-right
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-down-left"></i> fe-arrow-down-left
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-down-right"></i> fe-arrow-down-right
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-anchor"></i> fe-anchor
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-aperture"></i> fe-aperture
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-left"></i> fe-arrow-left
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-right"></i> fe-arrow-right
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-down"></i> fe-arrow-down
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-up-left"></i> fe-arrow-up-left
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-up-right"></i> fe-arrow-up-right
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-up"></i> fe-arrow-up
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-award"></i> fe-award
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-bar-chart"></i> fe-bar-chart
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-at-sign"></i> fe-at-sign
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-bar-chart-2"></i> fe-bar-chart-2
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-battery-charging"></i> fe-battery-charging
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-bell-off"></i> fe-bell-off
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-battery"></i> fe-battery
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-bluetooth"></i> fe-bluetooth
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-bell"></i> fe-bell
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-book"></i> fe-book
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-briefcase"></i> fe-briefcase
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-camera-off"></i> fe-camera-off
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-calendar"></i> fe-calendar
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-bookmark"></i> fe-bookmark
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-box"></i> fe-box
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-camera"></i> fe-camera
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-check-circle"></i> fe-check-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-check"></i> fe-check
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-check-square"></i> fe-check-square
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-cast"></i> fe-cast
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-chevron-down"></i> fe-chevron-down
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-chevron-left"></i> fe-chevron-left
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-chevron-right"></i> fe-chevron-right
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-chevron-up"></i> fe-chevron-up
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-chevrons-down"></i> fe-chevrons-down
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-chevrons-right"></i> fe-chevrons-right
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-chevrons-up"></i> fe-chevrons-up
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-chevrons-left"></i> fe-chevrons-left
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-circle"></i> fe-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-clipboard"></i> fe-clipboard
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-chrome"></i> fe-chrome
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-clock"></i> fe-clock
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-cloud-lightning"></i> fe-cloud-lightning
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-cloud-drizzle"></i> fe-cloud-drizzle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-cloud-rain"></i> fe-cloud-rain
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-cloud-off"></i> fe-cloud-off
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-codepen"></i> fe-codepen
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-cloud-snow"></i> fe-cloud-snow
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-compass"></i> fe-compass
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-copy"></i> fe-copy
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-corner-down-right"></i>
                        fe-corner-down-right
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-corner-down-left"></i> fe-corner-down-left
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-corner-left-down"></i> fe-corner-left-down
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-corner-left-up"></i> fe-corner-left-up
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-corner-up-left"></i> fe-corner-up-left
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-corner-up-right"></i> fe-corner-up-right
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-corner-right-down"></i>
                        fe-corner-right-down
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-corner-right-up"></i> fe-corner-right-up
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-cpu"></i> fe-cpu
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-credit-card"></i> fe-credit-card
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-crosshair"></i> fe-crosshair
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-disc"></i> fe-disc
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-delete"></i> fe-delete
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-download-cloud"></i> fe-download-cloud
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-download"></i> fe-download
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-droplet"></i> fe-droplet
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-edit-2"></i> fe-edit-2
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-edit"></i> fe-edit
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-edit-1"></i> fe-edit-1
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-external-link"></i> fe-external-link
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-eye"></i> fe-eye
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-feather"></i> fe-feather
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-facebook"></i> fe-facebook
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-file-minus"></i> fe-file-minus
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-eye-off"></i> fe-eye-off
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-fast-forward"></i> fe-fast-forward
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-file-text"></i> fe-file-text
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-film"></i> fe-film
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-file"></i> fe-file
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-file-plus"></i> fe-file-plus
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-folder"></i> fe-folder
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-filter"></i> fe-filter
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-flag"></i> fe-flag
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-globe"></i> fe-globe
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-grid"></i> fe-grid
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-heart"></i> fe-heart
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-home"></i> fe-home
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-github"></i> fe-github
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-image"></i> fe-image
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-inbox"></i> fe-inbox
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-layers"></i> fe-layers
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-info"></i> fe-info
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-instagram"></i> fe-instagram
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-layout"></i> fe-layout
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-link-2"></i> fe-link-2
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-life-buoy"></i> fe-life-buoy
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-link"></i> fe-link
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-log-in"></i> fe-log-in
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-list"></i> fe-list
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-lock"></i> fe-lock
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-log-out"></i> fe-log-out
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-loader"></i> fe-loader
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-mail"></i> fe-mail
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-maximize-2"></i> fe-maximize-2
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-map"></i> fe-map
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-maximize"></i> fe-maximize
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-map-pin"></i> fe-map-pin
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-menu"></i> fe-menu
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-message-circle"></i> fe-message-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-message-square"></i> fe-message-square
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-minimize-2"></i> fe-minimize-2
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-minimize"></i> fe-minimize
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-mic-off"></i> fe-mic-off
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-minus-circle"></i> fe-minus-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-mic"></i> fe-mic
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-minus-square"></i> fe-minus-square
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-minus"></i> fe-minus
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-moon"></i> fe-moon
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-monitor"></i> fe-monitor
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-more-vertical"></i> fe-more-vertical
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-more-horizontal"></i> fe-more-horizontal
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-move"></i> fe-move
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-music"></i> fe-music
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-navigation-2"></i> fe-navigation-2
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-navigation"></i> fe-navigation
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-octagon"></i> fe-octagon
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-package"></i> fe-package
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-pause-circle"></i> fe-pause-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-pause"></i> fe-pause
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-percent"></i> fe-percent
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-phone-call"></i> fe-phone-call
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-phone-forwarded"></i> fe-phone-forwarded
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-phone-missed"></i> fe-phone-miss
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-phone-off"></i> fe-phone-off
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-phone-incoming"></i> fe-phone-incoming
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-phone"></i> fe-phone
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-phone-outgoing"></i> fe-phone-outgoing
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-pie-chart"></i> fe-pie-chart
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-play-circle"></i> fe-play-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-play"></i> fe-play
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-plus-square"></i> fe-plus-square
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-plus-circle"></i> fe-plus-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-plus"></i> fe-plus
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-pocket"></i> fe-pocket
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-printer"></i> fe-printer
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-power"></i> fe-power
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-radio"></i> fe-radio
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-repeat"></i> fe-repeat
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-refresh-ccw"></i> fe-refresh-ccw
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-rewind"></i> fe-rewind
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-rotate-ccw"></i> fe-rotate-ccw
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-refresh-cw"></i> fe-refresh-cw
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-rotate-cw"></i> fe-rotate-cw
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-save"></i> fe-save
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-search"></i> fe-search
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-server"></i> fe-server
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-scissors"></i> fe-scissors
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-share-2"></i> fe-share-2
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-share"></i> fe-share
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-shield"></i> fe-shield
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-settings"></i> fe-settings
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-skip-back"></i> fe-skip-back
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-shuffle"></i> fe-shuffle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-sidebar"></i> fe-sidebar
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-skip-forward"></i> fe-skip-forward
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-slack"></i> fe-slack
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-slash"></i> fe-slash
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-smartphone"></i> fe-smartphone
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-square"></i> fe-square
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-speaker"></i> fe-speaker
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-star"></i> fe-star
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-stop-circle"></i> fe-stop-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-sun"></i> fe-sun
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-sunrise"></i> fe-sunrise
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-tablet"></i> fe-tablet
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-tag"></i> fe-tag
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-sunset"></i> fe-sunset
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-target"></i> fe-target
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-thermometer"></i> fe-thermometer
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-thumbs-up"></i> fe-thumbs-up
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-thumbs-down"></i> fe-thumbs-down
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-toggle-left"></i> fe-toggle-left
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-toggle-right"></i> fe-toggle-right
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-trash-2"></i> fe-trash-2
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-trash"></i> fe-trash
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-trending-up"></i> fe-trending-up
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-trending-down"></i> fe-trending-down
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-triangle"></i> fe-triangle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-type"></i> fe-type
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-twitter"></i> fe-twitter
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-upload"></i> fe-upload
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-umbrella"></i> fe-umbrella
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-upload-cloud"></i> fe-upload-cloud
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-unlock"></i> fe-unlock
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-user-check"></i> fe-user-check
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-user-minus"></i> fe-user-minus
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-user-plus"></i> fe-user-plus
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-user-x"></i> fe-user-x
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-user"></i> fe-user
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-users"></i> fe-users
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-video-off"></i> fe-video-off
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-video"></i> fe-video
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-voicemail"></i> fe-voicemail
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-volume-x"></i> fe-volume-x
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-volume-1"></i> fe-volume-1
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-volume-2"></i> fe-volume-2
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-volume"></i> fe-volume
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-watch"></i> fe-watch
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-wifi"></i> fe-wifi
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-x-square"></i> fe-x-square
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-wind"></i> fe-wind
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-x"></i> fe-x
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-x-circle"></i> fe-x-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-zap"></i> fe-zap
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-zoom-in"></i> fe-zoom-in
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-zoom-out"></i> fe-zoom-out
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-command"></i> fe-command
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-cloud"></i> fe-cloud
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-hash"></i> fe-hash
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-headphones"></i> fe-headphones
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-underline"></i> fe-underline
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-italic"></i> fe-italic
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-bold"></i> fe-bold
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-crop"></i> fe-crop
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-help-circle"></i> fe-help-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-paperclip"></i> fe-paperclip
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-shopping-cart"></i> fe-shopping-cart
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-tv"></i> fe-tv
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-wifi-off"></i> fe-wifi-off
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-gitlab"></i> fe-gitlab
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-sliders"></i> fe-sliders
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-star-on"></i> fe-star-on
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-heart-on"></i> fe-heart-on
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-archive"></i> fe-archive
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-down-circle"></i>
                        fe-arrow-down-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-up-circle"></i> fe-arrow-up-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-left-circle"></i>
                        fe-arrow-left-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-arrow-right-circle"></i>
                        fe-arrow-right-circle
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-bar-chart-line-"></i> fe-bar-chart-line-
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-bar-chart-line"></i> fe-bar-chart-line
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-book-open"></i> fe-book-open
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-code"></i> fe-code
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-database"></i> fe-database
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-dollar-sign"></i> fe-dollar-sign
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-folder-plus"></i> fe-folder-plus
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-gift"></i> fe-gift
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-folder-minus"></i> fe-folder-minus
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-git-commit"></i> fe-git-commit
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-git-branch"></i> fe-git-branch
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-git-pull-request"></i> fe-git-pull-request
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-git-merge"></i> fe-git-merge
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-linkedin"></i> fe-linkedin
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-hard-drive"></i> fe-hard-drive
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-more-vertical-"></i> fe-more-vertical-
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-more-horizontal-"></i> fe-more-horizontal-
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-rss"></i> fe-rss
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-send"></i> fe-send
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-shield-off"></i> fe-shield-off
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-shopping-bag"></i> fe-shopping-bag
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-terminal"></i> fe-terminal
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-truck"></i> fe-truck
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-zap-off"></i> fe-zap-off
                      </div>
                      <div class="col-sm-6 col-md-4 col-lg-3">
                        <i class="fe-youtube"></i> fe-youtube
                      </div>
                    </div>
                    <!-- end row -->
                  </div>
                </div>
                <!-- end card-->
              </div>
              <!-- end col-->
            </div>
            <!-- end row -->
          </div>
          <!-- container -->
        </div>
        <!-- content -->

        <!-- Footer Start -->
        <footer class="footer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-6">
                <div>
                  <script>
                    document.write(new Date().getFullYear());
                  </script>
                  © Dashtrap
                </div>
              </div>
              <div class="col-md-6">
                <div
                  class="d-none d-md-flex gap-4 align-item-center justify-content-md-end"
                >
                  <p class="mb-0">
                    Design & Develop by
                    <a href="https://myrathemes.com/" target="_blank"
                      >MyraStudio</a
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </footer>
        <!-- end Footer -->
      </div>
      <!-- End Page content -->
    </div>
    <!-- END wrapper -->

    <!-- App js -->
    <script src="../src/assets/js/vendor.min.js"></script>
    <script src="../src/assets/js/app.js"></script>
  </body>
</html>
